<template>
    <div class="name-list-main">
        <el-drawer v-model="appDialog.visible" :title="baseInfo.name" size="860px">
            <div class="content">
                <el-card shadow="never">
                    <div class="stat-title">当前群统计</div>
                    <div class="stat-list">
                        <div v-for="(item, index) in statList" :key="index" class="stat-list-item">
                            <div class="number">{{ item.num }}</div>
                            <div class="name">{{ item.name }}</div>
                        </div>
                    </div>
                </el-card>
                <ZwSearchForm :option="searchOption" @search="search" @reset="reset" />
                <ZwTable
                    ref="tableRef"
                    class="table-box"
                    :option="tableOption"
                    :row-key="getRowKey"
                    :fetch-params="state.searchParams"
                    :fetch-api="fetchApi()">
                </ZwTable>
            </div>
        </el-drawer>
    </div>
</template>
<script setup lang="tsx">
import { ref, reactive, computed, watch } from 'vue';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';
import ZWDrawer from '@/components/ZWDrawer.vue';
import { deepCopy } from '@/utils/helper';
import { getCrowdRoster } from '@/api/customer/crowdManage/index';
import { useRouter } from 'vue-router';

const router = useRouter();

const emit = defineEmits(['update:modelValue']);
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    id: {
        type: [String, Number],
        default: ''
    }
});

const zwRef = ref<any>(null);
const tableRef = ref<any>(null);

const appDialog = reactive<any>({
    visible: false
});

const statList = reactive([
    { name: '总人数', num: 123 },
    { name: '有效手机号', num: 0 },
    { name: '微信触达人数', num: 123 }
]);

const searchOption = computed(() => {
    return [
        {
            label: '手机号',
            name: 'name_or_phone',
            type: 'input',
            clearable: true,
            placeholder: '请输入手机号|姓名搜索'
        },
        {
            label: '触达方式',
            name: 'cust_channel',
            value: -1,
            type: 'select',
            placeholder: '请选择客户触达方式',
            optionList: [
                { label: '全部', value: -1 },
                { label: '短信', value: 0 },
                { label: '企业微信', value: 1 },
                { label: '微信', value: 2 },
                { label: '抖音消息', value: 3 },
                { label: '公众号', value: 4 },
                { label: '邮箱', value: 5 }
            ]
        }
    ];
});

const tableOption = [
    {
        label: '客户信息',
        render({ row }: any) {
            return (
                <div class="avatar-box">
                    <el-image class="avatar" teleported="true" src={row.headimg} fit="cover" />
                    <el-tooltip
                        effect="dark"
                        content={`${row.name} ${row.nickname ? '(' + row.nickname + ')' : ''}`}
                        placement="top-start">
                        <div class="name">
                            {row.name} {row.nickname ? '(' + row.nickname + ')' : ''}
                        </div>
                    </el-tooltip>
                </div>
            );
        }
    },
    {
        prop: 'mobile',
        label: '手机号'
    },
    {
        prop: 'sex_name',
        label: '性别'
    },
    {
        prop: 'operate',
        label: '操作',
        fixed: 'right',
        isOperate: true,
        option: [
            {
                name: '客户详情',
                disabledFn: (row: any) => {
                    return !row.cust_id;
                },
                click: (row: any, index: number) => handleDetails(row)
            }
        ]
    }
];

const baseInfo = reactive({
    name: ''
});

const defaultParams = {
    id: '',
    name_or_phone: '',
    cust_channel: '-1'
};

const state = reactive({
    searchParams: deepCopy(defaultParams)
});

const getRowKey = (row: any) => {
    return row.id;
};

const search = (data: any) => {
    const id = state.searchParams.id;
    tableRef.value.getTable().clearSelection();
    state.searchParams = deepCopy({ ...defaultParams, ...data, id });
};

const reset = () => {
    const id = state.searchParams.id;
    tableRef.value.getTable().clearSelection();
    state.searchParams = deepCopy({ ...defaultParams, id });
};

const fetchApi = () => {
    return getCrowdRoster;
};

const save = () => {};

const close = () => {};

const cancel = () => {};

const handleDetails = (row: any) => {
    router.push(`/customer/manage/list/detail?id=${row.cust_id}&type=${row.type}`);
};

const show = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

watch(
    () => props.modelValue,
    val => {
        // search()
    }
);

defineExpose({
    appDialog,
    state,
    statList,
    baseInfo
});
</script>
<style lang="scss" scoped>
.stat-title {
    padding-bottom: 14px;
}

.stat-list {
    // margin: 0 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    .stat-list-item {
        text-align: left;

        .number {
            padding-bottom: 8px;
            font-size: 30px;
            font-family: HelveticaNeue-Medium, HelveticaNeue;
            font-weight: 500;
            color: #33302d;
            line-height: 36px;
        }

        .name {
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #666;
            line-height: 20px;
        }
    }
}

:deep(.avatar-box) {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .avatar {
        width: 50px;
        height: 50px;
        border-radius: 4px;
    }

    .image-slot {
        .el-icon {
            font-size: 50px;
        }
    }

    .name {
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #33302d;
        max-width: 90px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        margin: 0 10px;
    }
}
</style>
